<template>
  <div class="container">
    <h1>新建公告</h1>
    <hr style="border: 1px solid rgb(240, 240, 240)" />
    <span>基础信息</span>
    <div class="body">
      <div class="input">
        <div class="input-left">
          <span>公告标题</span>
        </div>
        <div class="input-right">
          <el-input v-model="title" placeholder="请输入" />
        </div>
      </div>
      <div class="input">
        <div class="input-left">
          <span>紧急程度</span>
        </div>
        <div class="input-right">
          <el-select v-model="em_extend" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>
      <div class="input">
        <div class="input-left">
          <span>作者</span>
        </div>
        <div class="input-right">
          <el-input v-model="author" placeholder="请输入" />
        </div>
      </div>

      <div class="input">
        <div class="input-left">
          <span>备注</span>
        </div>
        <div class="input-right">
          <el-input
            v-model="remark"
            type="textarea"
            :rows="5"
            placeholder="请输入备注"
          />
        </div>
      </div>
      <div style="margin: 2rem 0 2rem 12rem">
        <el-button type="primary" @click="submitVehicle">提交</el-button>
        <el-button type="default" @click="to('tenement/announce')"
          >返回</el-button
        >
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import to from "@/utils/to.js";
import axios from "axios"; // 引入 axios 用于发送 HTTP 请求
import { ElMessage } from "element-plus"; // 引入 Element Plus 的消息提示
import { useRoute } from "vue-router";

const route = useRoute();
const id = route.query.id;

// 定义表单数据
const title = ref("");
const em_extend = ref(""); // 修正为 em_extend，保持与模板一致
const author = ref("");
const remark = ref(""); // 确保 remark 初始化为空字符串

// 紧急程度选项
const options = [
  { value: 1, label: "非常紧急" },
  { value: 2, label: "紧急" },
  { value: 3, label: "一般" },
];

// 提交公告数据到后端
const submitVehicle = async () => {
  try {
    if (id === undefined || id === "") {
      // 发送 POST 请求到后端接口
      const response = await axios.post(
        "http://localhost:8080/property/announce/add",
        {
          title: title.value,
          emExtend: em_extend.value,
          author: author.value,
        },
        {
          headers: {
            Authorization: localStorage.getItem("token"),
          },
        }
      );

      // 判断请求是否成功
      if (response.status === 200) {
        // 显示成功提示
        ElMessage.success("公告添加成功!");

        // 延迟跳转到车辆列表页面
        setTimeout(() => {
          to("tenement/announce"); // 使用你原本的返回方法
        }, 2000); // 延迟 2 秒跳转，给用户一点时间看到提示信息
      }
    } else {
      // 发送 PUT 请求到后端接口
      const response = await axios.put(
        "http://localhost:8080/property/announce/modify",
        {
          id: id,
          title: title.value,
          emExtend: em_extend.value,
          author: author.value,
        },
        {
          headers: {
            Authorization: localStorage.getItem("token"),
          },
        }
      );

      // 判断请求是否成功
      if (response.status === 200) {
        // 显示成功提示
        ElMessage.success("公告修改成功!");

        // 延迟跳转到车辆列表页面
        setTimeout(() => {
          to("tenement/announce"); // 使用你原本的返回方法
        }, 2000); // 延迟 2 秒跳转，给用户一点时间看到提示信息
      }
    }
  } catch (error) {
    // 显示错误提示
    ElMessage.error("公告添加失败!");
    console.error(error);
  }
};

const get = () => {
  const config = {
    url: `http://localhost:8080/property/announce/query/${id}`,
    method: "GET",
    headers: {
      Authorization: localStorage.getItem("token"),
    },
  };

  const response = axios(config);
  response
    .then((data) => {
      console.log(data);
      title.value = data.data.data.title;
      em_extend.value = data.data.data.emExtend;
      author.value = data.data.data.author;
      remark.value = data.data.data.detail;
    })
    .catch((error) => {
      console.log(error);
    });
};

onMounted(() => {
  get();
});
</script>

<style scoped>
.container {
  background-color: white;
  height: auto;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

h1 {
  font-size: 2rem;
  font-weight: 600;
  padding: 2rem 0 10px 4rem;
}

span {
  display: inline-block;
  font-size: 15px;
  margin: 1rem 2rem 1rem 0;
  line-height: 24px;
  width: 100px;
  text-align: right;
}

.body {
  display: grid;
  justify-content: center;
  align-items: center;
}

.input {
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
}

.input-right {
  width: 300px;
}

.el-input__inner {
  min-height: 80px; /* 设置文本框最小高度 */
  resize: none; /* 禁止调整大小 */
}
</style>
